<template>
  <div class="main">
    <div>
      <input type="text" v-model="userName.twoName" />
    </div>
    <h1>计算属性</h1>
    <div>
      <input type="text" v-model="changeTwoName" />
    </div>
  </div>
</template>

<script>
import { computed, reactive } from 'vue'
export default {
  setup() {
    const userName = reactive({
      twoName: '李月'
    })

    // vue3中计算属性的函数中如果传入一个对象，表示的是get和set
    const changeTwoName = computed({
      get() {
        return userName.twoName
      },
      set(val) {
        console.log(val)
        let name = val.split('_')
        userName.twoName = name
      }
    })

    return {
      userName,
      changeTwoName
    }
  }
}
</script>
